import TableRender from '@/render/TableRender'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'
import { getKeyToEnum, AllowStatusCnEnum, RetainReportCaseUserCnEnum } from '@/const/enum'
import { getInsurancePlans, updateCompanyPlans } from '@/api/insurance/period'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import type { InsurancePlanDto, PlanReqDto } from '@/api/insurance/period/types'
import Dialog from '@/components/dialog/Index'
import { Button, Col, message, Row } from 'ant-design-vue'
import Upload from '@/components/file/Upload'
import { addBlackList } from '@/api/insurance/serveCompany'

@Component
export class DialogBlock extends TableRender {
    @Prop() show!: boolean
    @Prop() serveCompanyId!: number

    @Emit('refresh')
    handleRefresh() {}

    showDialog = false
    noTablePadding = true

    fileUrl = []

    exceedConfigData = {} as Record<string, any> // 六类价格配置返回给后台用的数据

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDialog = this.show
        if (this.showDialog) {
            this.basicForm = renderForm(this.basicFormConfig)
        } else {
            initModelValue(this.basicFormConfig, {})
            this.fileUrl = []
        }
    }

    @Watch('showDialog', { immediate: true })
    handleWatchShowDialog() {
        this.updateShow(this.showDialog)
    }

    basicFormConfig = this.initBasicFormConfig() as FormModalDto
    initBasicFormConfig() {
        return {
            title: '',
            width: '800px',
            theme: 'light',
            show: false,
            labelCol: {
                style: {
                    width: '10em'
                }
            },
            items: {
                reason: {
                    name: '录入原因',
                    element: 'input',
                    required: true
                },
                isRetainReportCaseUser: {
                    name: '是否保留出险人员',
                    element: 'select',
                    required: true,
                    options: getKeyToEnum(RetainReportCaseUserCnEnum)
                }
            },
            complete: async () => {
                this.basicFormConfig.show = false
            },
            cancel: () => {
                this.basicFormConfig.show = false
            },
            init: () => {}
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    async onSubmit() {
        await this.basicForm.validate()
        const data = getModelValue(this.basicFormConfig)
        await addBlackList({
            serveCompanyId: this.serveCompanyId,
            reason: data.reason,
            isRetainReportCaseUser: data.isRetainReportCaseUser,
            fileUrl: this.fileUrl?.length ? this.fileUrl.join(',') : ''
        })
        this.showDialog = false
        message.success('操作成功')
        this.handleRefresh()
    }

    render() {
        return (
            <Dialog
                v-model:show={this.showDialog}
                width={500}
                title="加入黑名单"
                showClose
                v-slots={{
                    footer: () => {
                        return (
                            <div class="flex justify-center">
                                <Button type="primary" onClick={this.onSubmit}>
                                    确定
                                </Button>
                            </div>
                        )
                    }
                }}
            >
                <div class="mt-20px">{this.basicForm.element()}</div>
                <div class="flex ">
                    <span class="mr-20px">上传附件</span>
                    <Upload
                        v-model={this.fileUrl}
                        multiple={true}
                        params={{
                            autoUpload: true,
                            base64: false
                        }}
                    ></Upload>
                </div>
            </Dialog>
        )
    }
}

export default toNative<{ serveCompanyId: number }, { refresh: () => void }>(DialogBlock)
